<script setup lang="ts">
import {PAY_TYPE} from "~/const/Maps";
import {useChargeStore} from "~/stores/charge";
import type {FormInstance, FormRules} from "element-plus";
import {throttleFn} from "~/utils/utils";
definePageMeta({
  layout:'admin',
  title:'在线充值',
});
const login=useLoginStore();
const charge=useChargeStore();
const formRef=ref<FormInstance>();
const rules=reactive<FormRules>({
  money:[
    {required:true,message:'请输入充值金额',trigger:'blur'},
    {pattern:/^\d+(\.\d{1,2})?$/,message:'请输入正确的金额',trigger:'blur'}
  ],
  pay_type:[
    {required:true,message:'请选择支付方式',trigger:'blur'}
  ]
})
const form = reactive({
  money:'',
  pay_type:10,
});
const pay=ref()
const inter=ref()
const createOrder=throttleFn(async ()=>{
  if(formRef.value){
    formRef.value?.validate(async (isValid, invalidFields)=>{
      if(isValid){
        const {code,data}=await usePost('/recharge/createOrder',{pay_type:form.pay_type,amount:form.money})
        if(code==200){
          pay.value=data;
          dialogShow.value=true;
          inter.value=setInterval(checkState,3000)
        }
      }

    })
  }

},1000*5)
const dialogShow=ref(false);
const tabs=useTabsStore()
const route=useRoute()
const checkState=async ()=>{
  const {data,code}=await useGet('/recharge/getOrderDetail',{order_sn:pay.value.order_sn})
  if(code==200&&data.pay_status==1){
    dialogShow.value=false;
    if(formRef.value){
      formRef.value?.clearValidate?.()
      formRef.value?.resetFields?.()
    }
    formRef.value
    ElMessage.success('充值成功，跳转到充值列表')
    login.refreshInfo();
    const router=useRouter()
    clearInterval(inter.value);
    router.push('/admin/finance/chargeList')

  }
}
watchEffect(()=>{
  if(!dialogShow.value){
    clearInterval(inter.value)
  }
})
</script>

<template>
  <div>
    <AuthenText>
<pre>
1、温馨提示：如在充值中遇到错误，请更换（IE）浏览器再试一遍！
2、本站账户禁止虚假交易、信用卡套现或洗钱等交易行为！
</pre>
    </AuthenText>
    <el-card class="flex-1">
      <el-form label-suffix="：" label-width="120px" class="w-1/2 mx-52" ref="formRef" :model="form" :rules="rules">
        <el-form-item label="商品名称">
          “www.lanming.cc”预付款
        </el-form-item>
        <el-form-item label="账户余额">
          {{ login?.info?.money??0 }}元
        </el-form-item>
        <el-form-item label="充值金额" prop="money">
          <el-input placeholder="请填写你的账户密码" v-model="form.money" clearable class="w-100">
            <template #suffix>元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="充值方式" prop="pay_type">
          <el-radio-group v-model="form.pay_type">
            <el-radio :label="label" :value="value*1" v-for="(label,value) in PAY_TYPE"></el-radio>
          </el-radio-group>
        </el-form-item>
        <div class="text-center"><el-button type="primary" @click="createOrder">提交</el-button></div>
      </el-form>
    </el-card>
    <ClientOnly>
      <el-dialog
          v-model="dialogShow"
          :title="form.pay_type==20?'支付宝充值':'微信充值'"
          width="550"
          center
          :before-close="()=>dialogShow=false">
        <el-form label-width="120px">
          <el-form-item label="商品名称">
            “www.lanming.cc”预付款
          </el-form-item>
          <el-form-item label="充值金额">
            {{form.money}}
          </el-form-item>
          <el-form-item >
            <iframe :src="pay?.pay" width="300" height="280" v-if="form.pay_type==20"></iframe>
            <div class="w-50 h-50" >
              <img :src="pay?.pay" alt="">
            </div>
          </el-form-item>
        </el-form>
        <template #footer>
          <div><el-button type="primary" @click="()=>dialogShow=true">充值完成</el-button></div>
        </template>
      </el-dialog>
    </ClientOnly>

  </div>

</template>

<style scoped lang="scss">

</style>